<template>
  <el-container>
    <el-header>
      <div class="head">
        <div class="head-left">
          用户类别选择:
        </div>
        <div class="head-center">
          <el-radio-group v-model="role" @change="loadUsersByRole">
            <el-radio label="student">学生</el-radio>
            <el-radio label="teacher">教师</el-radio>
            <el-radio label="admin">管理员</el-radio>
          </el-radio-group>
        </div>
        <div class="head-right">
          <el-button
                     @click="registerForm = {}; addUserDialog = true">添加用户
          </el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="users" stripe height="450" style="width: 95%; margin-left: 50px" ref="table"
                @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="用户ID" width="180"/>
        <el-table-column prop="userNumber" label="学工号" width="180"/>
        <el-table-column prop="username" label="用户名" width="180"/>
        <el-table-column prop="phone" label="电话" width="180"/>
        <el-table-column prop="email" label="邮箱" width="180"/>
        <el-table-column prop="address" label="地址"/>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                @click.prevent="modifyUser(users[scope.$index])">
              编辑
            </el-button>
            <el-button
                type="text"
                size="small"
                @click.prevent="deleteUser(users[scope.$index])"
                v-show="users[scope.$index].id !== 1">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
  <el-dialog v-model="addUserDialog">
    <el-form class="register_form" label-width="80px" ref="registerForm" :model="registerForm">
      <h3>添加用户</h3>
      <el-form-item label="用户类型">
        <el-select v-model="registerForm.nickname" class="m-2" placeholder="选择用户类型" size="large">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学工号">
        <el-input
            v-model="registerForm.userNumber"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input
            v-model="registerForm.username"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            v-model="registerForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
            v-model="registerForm.re_password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
            v-model="registerForm.email"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input
            v-model="registerForm.phone"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
            v-model="registerForm.address"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0xp">
        <el-button type="primary" @click="register">添加</el-button>
        <el-button @click="addUserDialog = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="modifyUserDialog">
    <el-form class="register_form" label-width="80px" ref="registerForm" :model="registerForm">
      <h3>修改用户信息</h3>
      <el-form-item label="id">
        <el-input
            disabled
            v-model="registerForm.id"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input
            v-model="registerForm.username"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input
            v-model="registerForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
            v-model="registerForm.re_password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
            v-model="registerForm.email"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input
            v-model="registerForm.phone"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
            v-model="registerForm.address"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0xp">
        <el-button type="primary" @click="updateUser">保存</el-button>
        <el-button @click="modifyUserDialog = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="deleteDialogVisible" title="警告" width="30%" center>
    <span>
      是否确定删除用户: {{ pendingDelete.map(p => p.username).toString() }}？
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>


</template>

<script>
import {ElMessage} from 'element-plus'
import {ref} from "vue";

export default {
  name: "UserDetails",
  data() {
    return {
      users: [],
      multipleSelection: [],
      addUserDialog: ref(false),
      registerForm: {
        userNumber:"",
        username: "",
        password: "",
        re_password: "",
        email: "",
        address: "",
        phone: "",
        nickname: "",
      },
      role:'student',
      pendingDelete: [],
      deleteDialogVisible: ref(false),
      modifyUserDialog: ref(false),
      roles: [],
      hasRoles: [],
      page: 1,
      size: 10,
      total: 0,
      //新添用户类型选择
      options: [
        {
          value: 'student',
          label: '学生',
        },
        {
          value: 'teacher',
          label: '教师',
        },
        {
          value: 'admin',
          label: '管理员',
        },
      ]
    }
  },
  mounted() {
    this.loadUsersByRole()
  },
  methods: {
    deleteUser(user) {
      this.registerForm = user
      this.deleteDialogVisible = ref(true)
    },
    modifyUser(user) {
      this.registerForm = user
      this.modifyUserDialog = ref(true)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    bathDelete() {
      this.pendingDelete = this.multipleSelection
      this.deleteDialogVisible = ref(true)
    },
    selectable(row) {
      return row.id !== 1
    },
    register() {
      if (this.registerForm.password !== this.registerForm.re_password) {
        this.open3()
        return
      }
      this.$axios.post('register', {
        userNumber: this.registerForm.userNumber,
        username: this.registerForm.username,
        password: this.registerForm.password,
        phone: this.registerForm.phone,
        email: this.registerForm.email,
        address: this.registerForm.address,
        nickname: this.registerForm.nickname,
        userAvatar: 'http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg'
      }).then(success => {
        if (success.data.code === 200) {
          ElMessage({
            message: '添加成功',
            type: 'success'
          })
          this.addUserDialog = ref(false),
          this.loadUsersByRole()
        } else {
          ElMessage({
            message: success.data.message,
            type: 'error'
          })
        }
      }).catch(fail => {
        console.log(fail)
      })
    },
    confirmDelete() {
      this.deleteDialogVisible = ref(false)
      let _this = this
      this.$axios.delete("deleteUser", {params:{id:this.registerForm.id}})
          .then(success => {
            if (success.data.code === 200) {
              ElMessage({
                message: '删除成功',
                type: 'success'
              })
              _this.loadUsers()
            } else {
              ElMessage({
                message: success.data.message,
                type: 'error'
              })
            }
          }).catch(fail => {
        console.log(fail)
      })
      this.loadUsersByRole()
    },
    open3 (){
      ElMessage({
        message: '两次密码输入不一致',
        type: 'warning',
      })
    },
    updateUser() {
      if (this.registerForm.password !== this.registerForm.re_password) {
        this.open3()
        return
      }
      let _this = this
      this.$axios.post("updateUser", {
        id:this.registerForm.id,
        username: this.registerForm.username,
        password: this.registerForm.password,
        phone: this.registerForm.phone,
        email: this.registerForm.email,
        address: this.registerForm.address,
      })
      .then(success => {
        if (success.data.code === 200) {
          ElMessage({
            message: '更新成功',
            type: 'success'
          })
          _this.modifyUserDialog = ref(false)
        } else {
          ElMessage({
            message: success.data.message,
            type: 'error'
          })
        }
      }).catch(fail => {
        console.log(fail)
      })
    },
    handleCurrentChange() {
    },
    //根据当前选择类型加载数据
    loadUsersByRole() {
      let _this = this;
      this.$axios.get("SelectAllUserByNickname", {params: { nickname: this.role }})
          .then(success => {
            if (success.data.code === 200) {
              _this.users = success.data.data,
              console.log(_this.users)
            } else {
              ElMessage({
                message: success.data.message,
                type: 'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })


    }
  }
}
</script>

<style scoped>
.head {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-left {
  margin-right: 50px;
}
.head-center {
  margin-right: 80px;
}
</style>
